<template>
  <div style="background-color: #f7f7f7;">
    <myNavbar title="红包充值"></myNavbar>
    <div class="cash-out">
      <div class="cash-main">
        <div class="cash-top">
          <text class="cash-top-text">充值到红包</text>
        </div>
        <div class="cash-bottom">
          <div class="cash-center">
            <div class="cash-data">
              <text class="cash-center-mark">¥ </text>
              <input class="cash-center-input" v-model="amount" name="input" type="digit" :maxlength="maxlength" @click="getInput"  placeholder="请输入充值金额" />
            </div>
          </div>
          <div class="submit_payMethod" >
            <div class="submit_payMethod_Header">
              <text class="submit_payMethod_Header_Title">支付方式</text>
            </div>
            <div class="submit_payMethod_Content" >
              <div class="submit_payMethod_Content_Column">
                <div>
                  <div class="submit_payMethod_Content_Column_wrap">
                    <div class="submit_payMethod_Content_Column_image">
                      <image class="submit_payMethod_Content_Column_image" src="http://rzico.oss-cn-shenzhen.aliyuncs.com/v4.0/payment4.png"></image>
                    </div>
                    <div class="submit_payMethod_Content_Title_wrap">
                      <text class="submit_payMethod_Content_Title">线下付款</text>
                      <text class="submit_product_details_IntroductionTwo" style="margin-left:10px">请转账到指定账号</text>
                    </div>
                  </div>
                  <div v-if="paymentType == 'bankPayPlugin'" timingFunction="linear" delay="3">
                    <div class="submit_payMethod_Content_SubTitle_item">
                      <div class="submit_payMethod_Content_SubTitle_wrap" >
                        <text class="submit_payMethod_Content_SubTitle">开户行:{{bank}}</text>
                      </div>
                      <div class="submit_payMethod_Content_SubTitle_wrap">
                      </div>
                    </div>
                    <div class="submit_payMethod_Content_SubTitle_item">
                      <div class="submit_payMethod_Content_SubTitle_wrap" >
                        <text class="submit_payMethod_Content_SubTitle">开户名:{{bankName}}</text>
                      </div>
                      <div class="submit_payMethod_Content_SubTitle_wrap">
                      </div>
                    </div>
                    <div class="submit_payMethod_Content_SubTitle_item">
                      <div class="submit_payMethod_Content_SubTitle_wrap" >
                        <text class="submit_payMethod_Content_SubTitle">银行卡号:{{bankNum}}</text>
                      </div>
                      <div class="submit_payMethod_Content_SubTitle_wrap">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <switch style='zoom:0.7' :checked="paymentType == 'bankPayPlugin'" data-type="bankPayPlugin" @click="changeClick"/>
            </div>
            <div class="submit_payMethod_Content" >
              <div>
                <div class="submit_payMethod_Content_Column_wrap">
                  <div class="submit_payMethod_Content_Column_image">
                    <image class="submit_payMethod_Content_Column_image" src="http://rzico.oss-cn-shenzhen.aliyuncs.com/v4.0/payment1.png"></image>
                  </div>
                  <div class="submit_payMethod_Content_Title_wrap">
                    <text class="submit_payMethod_Content_Title">零钱支付</text>
                    <text class="submit_product_details_IntroductionTwo" style="margin-left:10px">可用余额{{point}}</text>
                  </div>
                </div>
              </div>

              <switch style='zoom:0.7' :checked="paymentType == 'pointPayPlugin'" data-type="pointPayPlugin" @click="changeClick"/>
            </div>

            <div class="submit_payMethod_Content" >
              <div>
                <div class="submit_payMethod_Content_Column_wrap">
                  <div class="submit_payMethod_Content_Column_image">
                    <image class="submit_payMethod_Content_Column_image" src="http://rzico.oss-cn-shenzhen.aliyuncs.com/v4.0/payment3.png"></image>
                  </div>
                  <div class="submit_payMethod_Content_Title_wrap">
                    <text class="submit_payMethod_Content_Title">微信支付 </text>
                    <text class="submit_product_details_IntroductionTwo" style="margin-left:10px">单笔限额5000元</text>
                  </div>
                </div>
              </div>


              <switch style='zoom:0.7' :checked="paymentType == 'weixinMiniPayPlugin'" data-type="weixinMiniPayPlugin"  @click="changeClick"/>
            </div>
          </div>
          <div class="cash-btn">
            <div class="cash-btn-button" type="primary" @click="paymentClick">
              <text class="cash-btn-button-text">充值</text>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
const eeui = app.requireModule('eeui');

import myNavbar from "../../../components/myNavbar/myNavbar.vue";
// import { getInfo as memberInfo } from '@/api/shareCenter'
import { recharge } from '../../../api/deposit';
// import { getBankInfo } from '../../../api/enterprise';
export default {
  data(){
    return{
      amount1:'',
      paymentVo:[1,2,3],
      balance: 0,
      point: 0,
      amount: "",
      maxlength: 10,
      disabled: true,
      check:'',
      paymentType:'weixinMiniPayPlugin',
      bank:'',
      bankNum:'',
      bankName:'',
    }
  },
  components: { myNavbar },
  created(){
    this.getBalance();
    // this.loadBankInfo();
  },
  mounted(){
  },
  methods:{
    loadBankInfo(){
      getBankInfo({mchId:this.getGlobalData().mchId}).then(res=>{
        this.bankNum = res.data.bankNum;
        this.bankName = res.data.bankName;
        this.bank = res.data.bank;
      })
    },
    getBalance() {
      // memberInfo().then(res => {
      //   this.balance = res.data.balance
      //   this.point = ( res.data.point/100).toFixed(2)
      // })

    },
    getInput(e) {
      // let amount = e.detail.value
      let amount = this.amount
      let maxlength = amount.indexOf('.') + 3 // 限制小数点后只能输入两位
      if (maxlength == 2) {
        maxlength = 10
      }
      // let disabled = util.isNull(amount)
    },
    wholeCashOut() {
      let amount = this.balance / 100
      this.disabled = false;
      // this.setData({amount, disabled: false})
    },
    changeClick(data){
      console.log("11111111111111111111111111112222222222222222222222")
      console.log(data.target.attr.dataType)
      this.paymentType = data.target.attr.dataType
      // this.paymentType = data.currentTarget.dataset.type
    },
    paymentClick(){
      var _this = this
      console.log(_this.amount)
      // if(_this.amount<=0||util.isNull(_this.data.amount)){
      if(_this.amount<=0|| _this.amount == null ){
        eeui.toast('请输入充值金额')
        return;
      }
      recharge({
        amount:_this.amount,
        paymentPluginId:_this.paymentType
      }).then(res=>{
        console.log(res.data.sn)
        if(this.data.paymentType=='bankPayPlugin'){
          eeui.toast('充值成功')
          setTimeout(()=>{
            eeui.closePage();
          },1000)
        }else if(this.data.paymentType=='pointPayPlugin')
        {
          eeui.toast('充值成功')
          setTimeout(()=>{
            wx.navigateBack({
              delta: 1
            })
          },1000)
        }
        else if(this.data.paymentType=='weixinMiniPayPlugin'){
          _this.submitClick(res.data.sn)
        }
      });
    },
    queryClick() {
      var _this = this
      query({
        sn: data
      }).then(res => {
        wx.navigateBack({
          delta: 1
        })
      }).catch(error => {
        wx.showToast({
          icon: "none",
          title: error.content,
        })
      })
    },
    submitClick(data){
      submit({
        paymentPluginId:'weixinMiniPayPlugin',
        sn:data
      }).then(res=>{
        wx.hideLoading()
        if (res.type == 'success') {
          wx.requestPayment({
            'timeStamp': res.data.timeStamp,
            'nonceStr': res.data.nonceStr,
            'package': res.data.package,
            'signType': res.data.signType,
            'paySign': res.data.paySign,
            'success': function (red) {
              _this.queryClick(data)
            },
            'fail': function (red) {
              eeui.toast('支付失败')
              eeui.closePage();
            }
          })
        } else {
          eeui.toast('支付失败')
          eeui.closePage();
        }
      })},

  }
}
</script>

<style scoped>
.cash-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  /*padding: 30px 0;*/
  padding-top: 30px;
  padding-bottom: 30px;
}
.cash-btn-button {
  border-radius: 15px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 600px;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #00b43c;
}
.cash-btn-button-text{
  color: white;
  font-size: 32px;
}

input{
  background:none;
  outline:none;
  border:0px;
}

/*.cash-out {*/
/*  position: absolute;*/
/*  width: 100%;*/
/*  z-index: 10;*/
/*}*/

.cash-main {
  margin: 30px;
  background-color: #f7f7f7;
  border-radius: 14px;
}

.cash-top {
  padding: 40px;
  background-color: #fff;
  border-radius: 14px;
}
.cash-top-text{
  font-size: 30px;
  color: #555;
}


.cash-center{
  padding-top: 10px;
  background-color: #fff;
}

.cash-data {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 55px;
  padding: 30px 0;
}

.cash-center-mark {
  margin-left: 40px;
  margin-right: 40px;
  font-size: 42px;
}

.cash-center-input {
  background-color: #fff;
  flex: 1;
  min-height: 65px;
}



page {
  background-color: rgba(248, 248, 248, 0.8);
}



.submit_product_details_IntroductionTwo {
  font-size: 24px;
  line-height: 26px;
  color: rgba(231, 91, 83, 1);
}

.submit_payMethod {
  width: 690px;
  padding: 25px;
  box-sizing: border-box;
  margin-top: 30px;
  background-color: white;
  border-radius: 16px;
}

.submit_payMethod_Header_Title {
  font-size: 32px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
}

.submit_payMethod_Content {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  margin-top: 50px;
}

.submit_payMethod_Content_Column {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.submit_payMethod_Content_Title {
  font-size: 28px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  display: block;
}
.submit_payMethod_Content_SubTitle_item{
  display:flex;
  flex-direction: row;
  margin: 10px 0 0 10px;
}
.submit_payMethod_Content_SubTitle_wrap{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.submit_payMethod_Content_SubTitle {
  font-size: 24px;
  font-weight: 400;
  color: rgba(231, 91, 83, 1);
  line-height: 36px;
  display: block;
}

.submit_payMethod_Content_Title_wrap{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.submit_payMethod_Content_Column_wrap{
  display: flex;
  flex-direction: row;
}
.submit_payMethod_Content_Column_image{
  padding-right: 10px;
  display: flex;
  flex-direction: row;
}
/*.submit_payMethod_Content_Column_image > image{*/
/*  width:48px;*/
/*  height:48px;*/
/*}*/
.submit_payMethod_Content_Column_image{
  width:48px;
  height:48px;
}
</style>


<!--<style scoped>-->

<!--input{-->
<!--  background:none;-->
<!--  outline:none;-->
<!--  border:0px;-->
<!--}-->

<!--.cash-out {-->
<!--  position: absolute;-->
<!--  width: 100%;-->
<!--  z-index: 10;-->
<!--}-->

<!--.cash-out .cash-main {-->
<!--  margin: 30px;-->
<!--  background-color: #f7f7f7;-->
<!--  border-radius: 14px;-->
<!--}-->

<!--.cash-out .cash-main .cash-top {-->
<!--  font-size: 30px;-->
<!--  color: #555;-->
<!--  padding: 40px;-->
<!--  background-color: #fff;-->
<!--  border-radius: 14px;-->
<!--}-->


<!--.cash-center{-->
<!--  padding-top: 10px;-->
<!--  background-color: #fff;-->
<!--}-->
<!--.cash-out .cash-main .cash-bottom .cash-center .cash-center-top {-->
<!--  margin-left: 40px;-->
<!--  font-size: 30px;-->
<!--  color: #555;-->
<!--}-->

<!--.cash-out .cash-main .cash-bottom .cash-center .cash-data {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  font-size: 55px;-->
<!--  padding: 30px 0;-->
<!--}-->

<!--.cash-out .cash-main .cash-bottom .cash-center .cash-data .cash-center-mark {-->
<!--  margin-left: 40px;-->
<!--  margin-right: 40px;-->
<!--}-->

<!--.cash-out .cash-main .cash-bottom .cash-center .cash-data .cash-center-text {-->
<!--  margin-left: 40px;-->
<!--  color: #00aaef;-->
<!--}-->

<!--.cash-out .cash-main .cash-bottom .cash-center .cash-data .cash-center-input {-->
<!--  background-color: #fff;-->
<!--  flex: 1;-->
<!--  min-height: 65px;-->
<!--}-->

<!--.cash-out .cash-main .cash-bottom .center-bottom {-->
<!--  border-top: 1px solid #ccc;-->
<!--  margin: 0px 40px;-->
<!--  padding: 20px 0;-->
<!--  font-size: 25px;-->
<!--  color: #b6b6b6;-->
<!--}-->

<!--.cash-out .cash-main .cash-bottom .center-bottom .cash-center-text {-->
<!--  color: #5b6a88;-->
<!--}-->

<!--.cash-out .cash-main .cash-bottom .cash-btn {-->
<!--  padding: 30px 0;-->
<!--}-->

<!--.cash-out .cash-main .cash-bottom .cash-btn button {-->
<!--  color: #ffffff;-->
<!--  width: 90%;-->
<!--}-->

<!--page {-->
<!--  background-color: rgba(248, 248, 248, 0.8);-->
<!--}-->



<!--.submit_product_details_IntroductionTwo {-->
<!--  font-size: 24px;-->
<!--  line-height: 26px;-->
<!--  color: rgba(231, 91, 83, 1);-->
<!--}-->



<!--.submit_payMethod {-->
<!--  width: 690px;-->
<!--  padding: 25px;-->
<!--  box-sizing: border-box;-->
<!--  margin-top: 30px;-->
<!--  background-color: white;-->
<!--  border-radius: 16px;-->
<!--}-->

<!--.submit_payMethod_Header_Title {-->
<!--  font-size: 32px;-->
<!--  font-weight: 400;-->
<!--  color: rgba(26, 26, 30, 1);-->
<!--}-->

<!--.submit_payMethod_Content {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  flex-direction: row;-->
<!--  margin-top: 50px;-->
<!--}-->

<!--.submit_payMethod_Content_Column {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--}-->

<!--.submit_payMethod_Content_Title {-->
<!--  font-size: 28px;-->
<!--  font-weight: 400;-->
<!--  color: rgba(26, 26, 30, 1);-->
<!--  display: block;-->
<!--}-->
<!--.submit_payMethod_Content_SubTitle_item{-->
<!--  display:flex;-->
<!--  margin: 10px 0 0 10px;-->
<!--}-->
<!--.submit_payMethod_Content_SubTitle_wrap{-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--}-->
<!--.submit_payMethod_Content_SubTitle {-->
<!--  font-size: 24px;-->
<!--  font-weight: 400;-->
<!--  color: rgba(231, 91, 83, 1);-->
<!--  line-height: 36px;-->
<!--  display: block;-->
<!--}-->

<!--.title .title_item{-->
<!--  margin-top: 10px;-->
<!--  font-size: 18px;-->
<!--}-->
<!--.submit_payMethod_Content_Title_wrap{-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--}-->
<!--.submit_payMethod_Content_Column_wrap{-->
<!--  display: flex;-->
<!--}-->
<!--.submit_payMethod_Content_Column_image{-->
<!--  padding-right: 10px;-->
<!--  display: flex;-->
<!--}-->
<!--.submit_payMethod_Content_Column_image > image{-->
<!--  width:48px;-->
<!--  height:48px;-->
<!--}-->
<!--</style>-->


